<template>
    <div class="project-item" v-if="searchFlag === 0 || (searchFlag === 1 && userId === project.createdBy) || (searchFlag === 2 && userId !== project.createdBy)">
        <div class="item-head" @click.self="editProject" v-intro="'项目基本信息管理'" v-intro-step="2">
            <div class="item-title">
                {{project.name}}
            </div>
            <div class="item-start">
                <Rate :count="1" :clearable="true" v-model="flag" @on-change="changeFlag"></Rate>
            </div>
        </div>
        <div class="item-detail" @click="editProject">
            {{project.description}}
        </div>
        <div class="item-footer">
            <div class="item-date">
                创建时间: {{project.createdAt}}
            </div>
            <div class="item-btn">
                <Icon type="person-add" size="14" v-intro="'添加项目其他开发成员'" v-intro-step="3" @click="party"></Icon>
                <Icon type="soup-can" size="14" @click="mag" v-intro="'项目数据库、API管理'" v-intro-step="4"></Icon>
                <Dropdown @on-click="genCode" v-intro="'项目代码下载'" v-intro-step="5">
                    <Icon type="android-download" size="14"></Icon>
                    <DropdownMenu slot="list">
                        <DropdownItem name="back">生成后端代码下载</DropdownItem>
                        <DropdownItem name="front">生成前台代码下载</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </div>
    </div>
</template>

<script>
    import Util from '../../../libs/util';
    export default {
        props:{
            project: Object,
            searchFlag: Number
        },
        data(){
            return {
                flag: 0,
                userId: ''
            };
        },
        created(){
            this.flag = this.project.flag * 1;
            this.userId = this.$store.getters.loginInfo.id;
        },
        methods:{
            editProject(){
                this.$router.push({path: '/main/edit', query:{id: this.project.id}});
            },
            party(){
                this.$router.push({path: '/main/party', query:{id: this.project.id, partyId: this.project.createdBy}});
            },
            mag(){
                this.$router.push({path: '/main/mag', query:{id: this.project.id}});
            },
            changeFlag(val){
                this.$http.post('/codegen/api/v1/project/star/update',{
                    id: this.project.id,
                    flag: val
                }).catch(()=>{
                    this.$Message.error('请求错误！');
                });
            },
            genCode(name){
                if (name === 'back') {
                    this.$http.get('/codegen/api/v1/projects/'+ this.project.id +'/generate/code').then((res)=>{
                        if (res.status === 200) {
                            this.download(res.data.msgData, this.project.name + '.zip');
                        }
                    }).catch(()=>{
                        this.$Message.error('代码生成失败！');
                    });
                } else {
                    this.download('/codegen/api/v1/projects/'+ this.project.id +'/downloadUI', this.project.name + '-ui.zip');
                }
            },
            download(url, fileName){
                let _this = this;
                let xhr = new XMLHttpRequest();
                xhr.open('GET', Util.url + url, true);
                xhr.setRequestHeader('AUTH_TOKEN', this.$store.getters.loginInfo.authToken);
                xhr.setRequestHeader('CURRENT_USER', this.$store.getters.loginInfo.loginId);
                xhr.responseType = 'blob';
                xhr.onload = function () {
                    if (this.status === 200) {
                        let blob = this.response;
                        let reader = new FileReader();
                        reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
                        reader.onload = function (e) {
                            // 转换完成，创建一个a标签用于下载
                            let body = document.body;
                            let a = document.createElement('a');
                            a.download = fileName;
                            a.href = e.target.result;
                            body.appendChild(a);
                            a.click();
                            body.removeChild(a);
                        };
                    } else {
                        _this.$Message.error('下载工程失败！');
                    }
                };
                xhr.send();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .project-item {
        margin: 18px 18px 0 0;
        width: 320px;
        background-color: #fff;
        padding: 0 8px 8px 0;
        border-bottom-right-radius: 16px;
        box-shadow: 2px 2px 3px rgba(0,0,0,0.03);

        .item-head {
            display: flex;
            justify-content: space-between;
            border-left: 3px solid #2d8cf0;
            padding: 8px 0;
            cursor: pointer;
            .item-title {
                margin-left: 16px;
                font-size: 18px;
                font-weight: 600;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
        }
        .item-detail {
            margin-left: 16px;
            color: 	#9ea7b4;
            margin-bottom: 16px;
            font-size: 14px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            cursor: pointer;
        }
        .item-footer {
            margin-left: 16px;
            display: flex;
            justify-content: space-between;

            .item-date{
                color: 	#9ea7b4;
            }

            .item-btn{
                i{
                    margin:0 8px;
                    cursor: pointer;
                    &:hover{
                        color: #2d8cf0;
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .project-item {
        .ivu-rate-star-full:hover:before, .ivu-rate-star-half:hover .ivu-rate-star-content:before {
            color: #ef645d;
        }
        .ivu-rate-star-full:before, .ivu-rate-star-half .ivu-rate-star-content:before {
            color: #ef645d;
        }

        .item-footer{
            .ivu-btn{
                padding: 0 6px;
                i{
                    font-size: 14px;
                }
            }
        }
    }
</style>